<template>
	<view class="commentItem">
		<view class="header">
			<image src="@/static/imgs/smile.png" class="avater" mode="aspectFill"></image>
			<view>
				<view>{{props.userName}}</view>
			</view>
		</view>
		<view class="body">
			<view class="context">
				{{props.context}}
				想吃麦当劳，
			</view>
			<view style="font-size: 25rpx;color: #c2c5cd;">{{props.createTime}}</view>
		</view>
		<view class="childrenComment">
			<ChildrenComment />
		</view>
	</view>
</template>

<script setup>
	import ChildrenComment from './ChildrenComment.vue'
	import {
		ref
	} from 'vue'

	const props = defineProps({
		context: {
			type: String,
			// default: '-'
			default: '想吃麦当劳，想吃麦当劳，想吃麦当劳，想吃麦当劳，想吃麦当劳，'
		},
		id: {
			type: Number,
			default: 99
		},
		createTime: {
			type: String,
			default: '-'
		},
		avaterUrl: {
			type: String,
			default: ''
		},
		userName: {
			type: String,
			default: '-'
		},
		likeNum: {
			type: Number,
			default: 0
		},
		commentNum: {
			type: Number,
			default: 0
		},
		childrenComment: {
			type: Array,
			default: []
		}
	});
</script>

<style lang="less" scoped>
	.commentItem {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 35rpx;
			box-sizing: border-box;
			gap: 15rpx;
			position: relative;
			font-size: 34rpx;

			.avater {
				height: 80rpx;
				width: 80rpx;
			}
		}

		.body {
			height: auto;
			box-sizing: border-box;
			padding-right: 80rpx;
			padding-bottom: 30rpx;
			margin-left: 115rpx;
		}

		.childrenComment {
			width: 90%;
		}
	}
</style>